.page-order {
	margin-top: 10px;
	padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
	.unpaid_code {
		display: block;
		width: 200rpx;
		height: 200rpx;
		margin: 10rpx auto;
	}
	.c_address{
		color: #333;
		font-size: 28rpx;
		margin: 20rpx 0;
		font-weight: 700;
		text-align: center;
	}
	.card {
		padding: 26rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		.card-title {
			font-size: 30rpx;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #eee;
		}
	}

	.status-block {
		.title {
			font-size: 34rpx;
			font-weight: bold;

			&.cancelled {
				color: #888;
			}

			&.unpaid {
				color: #f00;
			}
		}

		.btn-pay {
			margin-top: 20rpx;
			margin-left: 0;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #fff;
			text-align: center;
			background: linear-gradient(90deg, #2fd70a, #51c75f);
		}
	}

	.item-wrap {
		.item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.title {
				color: #666;
				white-space: nowrap;
			}

			.value {
				color: #222;
				text-align: right;
				padding-left: 100rpx;
			}
		}
	}

	.histories-wrap {
		.item {
			margin-bottom: 10px;
			&:last-child {
				margin-bottom: 0;
			}

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 8px;
				font-size: 28rpx;

				.right {
					color: #666;
					font-size: 26rpx;
				}
			}

			.comment {
				color: #666;
				font-size: 26rpx;
			}
		}
	}

	.product-block {
		.sub-title {
			font-size: 26rpx;
			color: #888;
			font-weight: normal;
			margin-left: 10rpx;
		}

		.product {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.left {
				width: 140rpx;
				height: 140rpx;
				border-radius: 10rpx;
				overflow: hidden;
				border: 1rpx solid #e8e8e8;

				.image {
					max-width: 100%;
					height: 100%;
				}
			}

			.right {
				flex: 1;
				margin-left: 20rpx;

				.name {
					font-size: 26rpx;
					color: #333;
					margin-bottom: 10rpx;
				}

				.price {
					font-size: 24rpx;
					color: #666;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}
	}

	.totals {
		border-top: 1px solid #f1f1f1;
		padding-top: 20rpx;
		margin-top: 30rpx;

		.total-list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.left {
				font-size: 28rpx;
				color: #666;
			}

			.right {
				font-size: 28rpx;
				color: #222;
				font-weight: bold;
				line-height: 1.8;
			}
		}
	}

	.address-block {
		.item {
			display: flex;
			margin-bottom: 20rpx;

			.icon {
				margin-right: 10rpx;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

.btn-wrap {
	justify-content: flex-end;

	.btn {
		display: inline-block;
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
		background-color: #fff;
		color: #666;
		border: 1rpx solid #aaa;
		margin-left: 16rpx;
		min-width: 160rpx;
		text-align: center;

		&.can_cancel {
			color: #999;
			border-color: #999;
		}

		&.can_reorder {
			color: $primary;
			border-color: $primary;
			font-weight: bold;
		}

		&.can_pay {
			color: #fff;
			background-color: $primary;
			font-weight: bold;
			border-color: $primary;
		}
	}
}
